/**
 * Created by yzdd on 2018/6/9.
 */
import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  FlatList,
  TouchableOpacity
} from 'react-native';
import {line, publicStyle, width} from "../utils/publiscStyle";
import Row from "../components/Row";
import SelectRoom from "./SelectRoom";
import {KeyboardAwareScrollView} from "react-native-keyboard-aware-scroll-view"


const styles = StyleSheet.create({
  item: {
    width,
    height: 44,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
    backgroundColor: "#FFFFFF",
    borderBottomColor: "#EEEEEE",
    borderBottomWidth: line,
    paddingLeft: 15,
    paddingRight: 15
  },
  font9: {
    fontSize: 16,
    color: "#666666"
  },
  font10: {
    fontSize: 16,
    color: "#000000"
  },
  topMess: {},
  middleMess: {
    backgroundColor: "#FFFFFF",
    marginTop: 10,
    marginBottom: 10
  },
  icon4: {
    width: 7,
    height: 12,
    marginLeft: 10
  },
  rightCon: {
    flexDirection: "row",
    alignItems: "center"
  },
  font11: {
    fontSize: 16,
    color: "#BDBDBD"
  },
  rightInputView: {
    width: width - 107,
    height: 34,
    backgroundColor: "#F1F1F3",
    paddingLeft: 10,
    flexDirection: "row",
    alignItems: 'center',
    paddingRight: 10
  },
  rightInput: {
    padding: 0,
    flex: 1
  },
  icon5: {
    width: 17,
    height: 17,
    tintColor: "#999999",
    marginLeft: 10
  },

  con: {
    flex: 1,
  },
  addBtn: {
    width,
    height: 55,
    flexDirection: 'row',
    alignItems: "center",
    backgroundColor: "#1AAD19",
    justifyContent: 'center'
  },
  font17: {
    fontSize: 16,
    color: "#FFFFFF"
  },
  detailItem: {
    width,
    height: 72,
    borderBottomColor: "#EEEEEE",
    borderBottomWidth: line,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    paddingLeft: 15,
    paddingRight: 15
  },
  font12: {
    fontSize: 16,
    color: "#000000"
  },
  rightItemCon: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  rightItemConInput: {
    width: 45,
    height: 30,
    padding: 0,
    textAlign: "center",
    backgroundColor: "#F1F1F3",
    marginLeft: 10,
    fontSize: 14,
    marginRight: 10
  },
  font13: {
    fontSize: 14,
    color: "#333333"
  },
  font14: {
    fontSize: 16,
    color: "#333333"
  },
});
const rightArrowIcon = require("../assets/rightArrow.png");
const scanIcon = require("../assets/scan.png");

export default class DeliveryDetail extends Component {
  static navigationOptions = {
    title: "发货详情"
  }


  renderItem = (item, index) => {
    return <Item navigation={this.props.navigation} item={item} index={index}/>
  }
  toSub = () => {
    const {goBack} = this.props.navigation;
    goBack();
  }
  toSelectRoom = () => {
    const {navigate} = this.props.navigation;
    navigate("SelectRoom")
  }
  toScan = () => {
    const {navigate} = this.props.navigation;
    navigate("ScanPage");
  }
  renderHeader = () => {
    return (
      <View>
        <View style={styles.topMess}>
          <View style={styles.item}>
            <Text style={styles.font9}>订单时间</Text>
            <Text style={styles.font10}>2018-02-22</Text>
          </View>
          <View style={styles.item}>
            <Text style={styles.font9}>采购员</Text>
            <Text style={styles.font10}>李俊</Text>
          </View>
          <View style={styles.item}>
            <Text style={styles.font9}>来源单号</Text>
            <Text style={styles.font10}>PO201803070001</Text>
          </View>
          <View style={styles.item}>
            <Text style={styles.font9}>采购说明</Text>
            <Text style={styles.font10}>请把发货单直接发给XXX公司</Text>
          </View>
        </View>
        <View style={styles.middleMess}>
          <TouchableOpacity style={styles.item} onPress={this.toSelectRoom}>
            <Text style={styles.font10}>收货库房</Text>
            <View style={styles.rightCon}>
              <Text style={styles.font11}>请选择收货库房</Text>
              <Image
                source={rightArrowIcon}
                resizeMode={"contain"}
                style={styles.icon4}
              />
            </View>
          </TouchableOpacity>
          <View style={styles.item}>
            <Text style={styles.font10}>物流公司</Text>
            <View style={styles.rightCon}>
              <View style={styles.rightInputView}>
                <TextInput
                  style={styles.rightInput}
                  underlineColorAndroid={"transparent"}
                  placeholder={"请填写物流公司名称"}
                />
              </View>
            </View>
          </View>
          <View style={styles.item}>
            <Text style={styles.font10}>物料单号</Text>
            <View style={styles.rightCon}>
              <View style={styles.rightInputView}>
                <TextInput
                  style={styles.rightInput}
                  underlineColorAndroid={"transparent"}
                  placeholder={"请填写物料单号"}
                />
                <TouchableOpacity onPress={this.toScan}>
                  <Image
                    source={scanIcon}
                    resizeMode={"contain"}
                    style={styles.icon5}
                  />
                </TouchableOpacity>
              </View>
            </View>
          </View>
          <View style={styles.item}>
            <Text style={styles.font10}>总 箱 数</Text>
            <View style={styles.rightCon}>
              <View style={styles.rightInputView}>
                <TextInput
                  style={styles.rightInput}
                  underlineColorAndroid={"transparent"}
                  placeholder={"请填写总箱数"}
                />
              </View>
            </View>
          </View>
        </View>
      </View>
    )
  }

  render() {
    return (
      <KeyboardAwareScrollView>
        <View style={publicStyle.container}>
          <FlatList
            ListHeaderComponent={() => this.renderHeader()}
            style={styles.con}
            data={[1, 2, 3]}
            keyExtractor={(item, index) => index}
            showsVerticalScrollIndicator={false}
            renderItem={({item, index}) => this.renderItem(item, index)}
          />
          <TouchableOpacity style={styles.addBtn} onPress={this.toSub}>
            <Text style={styles.font17}>发货</Text>
          </TouchableOpacity>

        </View>
      </KeyboardAwareScrollView>
    );
  }
}

class Item extends Component {
  onButtonPressCancel = () => {
    console.log("----")
  }
  onButtonPressDelete = () => {
    console.log("----delete")
  }

  constructor(props) {
    super(props);
    this.state = {
      damping: 1 - 0.6,
      tension: 300
    };
  }

  render() {
    return (
      <Row
        onButtonPressDelete={this.onButtonPressDelete}
        onButtonPressCancel={this.onButtonPressCancel}
        damping={this.state.damping}
        tension={this.state.tension}>
        <View style={styles.detailItem}>
          <Text style={styles.font12}>POS机001</Text>
          <View>
            <Text style={[styles.font13, {marginBottom: 7}]}>采购: 100 台</Text>
            <Text style={styles.font13}>已发: 25 台</Text>
          </View>
          <View style={styles.rightItemCon}>
            <Text style={styles.font14}>本次</Text>
            <TextInput
              style={styles.rightItemConInput}
              underlineColorAndroid={"transparent"}
            />
            <Text style={styles.font14}>台</Text>
          </View>
        </View>
      </Row>
    )
  }
}